<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../css/normalize.css" real="stylesheet">
    <style>
        header {
            margin: 0 auto;
            width: 1200px;
            border: 1px solid red;
        }

        header #header-top {
            font-size: 12px;
            height: 30px;
            background-color: rgb(234, 234, 234);
        }

        header #header-top>div {
            float: left;
            line-height: 30px;

        }

        header #header-top a {
            text-decoration: none;
            color: black;

        }

        header #header-top .register {
            padding: 0 5px;
            border-left: 1px solid black;
            margin-left: 5px;
        }

        header #header-top ul {
            float: right;
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        header #header-top ul li {
            float: left;
            line-height: 30px;

        }

        header #header-top ul li a {
            border-left: 1px solid gray;
            padding: 0 10px;
        }

        #header-top ul .delete>a {
            border-left: none;
        }

        header #header-bottom {
            height: 106px;
            line-height: 106px;
            border: 1px solid green;
        }

        header #header-bottom .img {
            float: left;
            width: 265px;
            /* border: 1px solid yellow; */
        }

        header #header-bottom img {
            margin: 25px 45px;
            vertical-align: middle;
        }

        header #header-bottom div {
            float: right;
            font-size: 0;
        }

        header #header-bottom form {
            position: relative;
        }

        header #header-bottom .search form>input {

            width: 490px;
            height: 32px;
            padding: 0 4px;
            border: 2px solid red;
            box-sizing: border-box;
        }

        header #header-bottom .search form button {
            position: absolute;
            top: 32px;
            right: 0;
            width: 68px;
            height: 32px;
            background-color: red;
            color: #fff;
            border: none;
        }

        /* 第二部分 */
        section {
          display:flow-root;
            width: 1200px;
            height:45px;
            line-height: 45px;
            border: 1px solid purple;
            margin: 0 auto;
        }

        #container h1 {
          margin:0px;
            float: left;
            width: 210px;
            /* font-size: 0; */
            height: 45px;
            
            text-align:center;
            color: #fff;
            font-size: 14px;
            background-color: red;
        }
        

        #container ul  {
            display:flow-root;
            margin: 0;
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        #container ul li{
          
            /* margin:0 22px; */
        }
        #container ul li a {
            margin:0 22px;
            font-size:16px;
           float:left;
            text-decoration: none;
            color: #333;
           
            font-size: 16px;

        }

        #container ul li a:hover {
            color: green;
            text-decoration: underline;
        }

        /* 第二部分左边二级菜单 */
        #count {
            /* position:relative; */
            display: flex;
            align-items: stretch;
            width: 1200px;
            height: 464px;
            border: 1px solid black;
            margin: 0 auto;
        }

/* 
        #count div:first-of-type {

            width: 210px;
        }
 */
        #count div:nth-of-type(2) {
            overflow: hidden;
            position: relative;
            width: 730px;
            /* background-color: red; */
        }

        #count div:nth-of-type(3) {
            width: 260px;
            /* background-color: aquamarine; */
        }

        .menu div {
            display: none;
            /* z-index: 2; */
        }

        .menu ul {
            position: relative;
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        .menu ul li {
            box-sizing: border-box;
            padding: 0 20px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }

        .menu ul li a {
            color: #333;
            text-decoration: none;
        }

        .menu ul li div {
            position: absolute;
            top: -1px;
            background-color: white;
            bottom: -1px;
            left: 210px;
            width: 750px ;
            border: 1px solid;
        }

        .menu ul li a:hover {
            text-decoration: underline;
            color: greenyellow;
        }

        .menu ul li:hover div {
            display: block;
            z-index: 1;
        }

        /* 第二部分中间轮播图 */


        #banner ol {
            display: flex;
            width: 2920px;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }

        #banner li {
            position: absolute;
            top: 0;
            left: 0;
        }

        #banner img {
            width: 730px;
            padding: 5px;
            height: 454px;
        }

        /* 第二部分右邊雪碧圖 */
        #right .top {
            border-bottom: 1px solid #333;
            width: 218px;
            height: 22px;
            padding: 5px;
            padding-right: 10px;
            margin: 5px 5px 0px 5px;
            font-size: 14px;
        }

        #right .top em {
            font-size: normal;
            font-style: normal;
            float: left;
        }

        #right .top span {
            float: right;
        }

        #right .list ul {
            margin: 0;
            padding: 0px;
            list-style-type: none;
            font-size: 12px;
            width: 281px;
            padding: 5px 15px;
        }

        #right .list ul li {
            height: 26px;
            line-height: 26px;
        }

        #right .list ul li a {
            color: #333;
            text-decoration: none;
        }

        #right .list ul li a span {
            font-weight: bold;
        }

        .script ul {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 260px;
            height: 195px;
            border: 1px solid #333;
        }

        .script ul li {
            display: flex;
            flex-direction: column;
            width: 62px;
            height: 64px;
            border: 1px solid #333;
        }

        .script ul li div {
            width: 60px !important;
            height: 40px;
            /* border:1px solid #333; */
            background-image: url(../images/home/icons.png);
        }

        .script ul li:nth-of-type(2) div {
            background-position: -60px 0;
        }

        .script ul li:nth-of-type(3) div {
            background-position: -120px 0;
        }

        .script ul li:nth-of-type(4) div {
            background-position: -180px 0;
        }

        .script ul li:nth-of-type(5) div {
            background-position: 0px -70px;
        }

        .script ul li:nth-of-type(6) div {
            background-position: -60px -70px;
        }

        .script ul li:nth-of-type(7) div {
            background-position: -120px -70px;
        }

        .script ul li:nth-of-type(8) div {
            background-position: -180px -70px;
        }

        .script ul li:nth-of-type(9) div {
            background-position: 0px -140px;
        }

        .script ul li:nth-of-type(10) div {
            background-position: -60px -140px;
        }

        .script ul li:nth-of-type(11) div {
            background-position: -120px -140px;
        }

        .script ul li:nth-of-type(12) div {
            background-position: -180px -140px;
        }

        .script ul li a {
            color: #333;
            text-decoration: none;
            text-align: center;
            font-size: 12px;
            height: 22px;
            line-height: 22px;
        }

        .script ul li a:hover {
            color: red;
            text-decoration: underline;
        }

        .picture {
            padding-top: 5px;
            width: 260px;
            height: 75px;
        }

        .picture img {
            width: 100%;
            height: 100%;
        }

        .commod {
            display: flex;
            padding: 0;
            margin: 10px auto;
            list-style-type: none;
            width: 1200px;
            height: 165px;
        }

        .commod li {
            height: 165px;
        }

        .commod li:first-of-type {
            box-sizing: border-box;
            padding: 30px 0;
            width: 200px;
            background-color: #5C5251;
            text-align: center;
        }

        .commod li:first-of-type h3 {
            height: 30px;
            line-height: 30px;
            margin: 9px 0;
            font-size: 18px;
            color: white;
        }

        /* 热卖 */
        .hot {
            justify-content: center;
            width: 1200px;
            height: 78px;
            /* border:1px solid; */
        }

        .hot div {
            width: 312px;
            height: 78px;
            margin: 0 auto;
            /* border:1px solid; */
        }

        .hot div a {
            width: 100px;
            height: 78px;
            padding: 0 18px;
            box-sizing: border-box;
            float: left;
            color: #B29999;
            text-decoration: none;
        }

        .hot div a:first-of-type {
            color: #E60012;
        }

        .hot div a p:first-of-type {
            width: 64px;
            height: 35px;
            margin: 5px 0;
        }

        .hot div a p:first-of-type i {
            display: inline-block;
            width: 35px;
            height: 35px;
            margin-left: 10px;
            /* border:1px solid; */
            background-image: url(../images/home/bg0.png);
        }

        .hot div a:active i {
            background-position: -35px 0;
        }

        .hot .active i {
            background-position: -35px 0;
        }

        .hot div a p:nth-of-type(2) {
            height: 28px;
            margin: 5px 0;
        }

        .order {
            display: flex;
            justify-content: space-evenly;
            width: 1180px;
            height: 340px;
            padding: 10px;
            margin: 0 auto;
            list-style-type: none;
            border: 1px solid yellow;
        }

        .order li {
            overflow: hidden;
            width: 269px;
            height: 328px;
            border: 1px solid red;
        }

        .order li div:first-of-type {
            width: 230px;
            height: 210px;
            margin: 5px auto 18px auto;
        }

        .order li div:first-of-type a img {
            width: 200px;
            height: 200px;
            /* margin:5px auto 18px auto; */
        }

        .order li div:nth-of-type(2) {
            width: 269px;
            height: 95px;
            line-height: 28px;
            padding-left: 10px;
            background-color: #FAFAFA;
        }

        .order li div:nth-of-type(2) p:first-of-type {
            width: 259px;
            height: 50px;
            font-size: 12px;
        }

        .order li div:nth-of-type(2) p:first-of-type:hover a {
            color: yellowgreen;
        }

        .order li div a {
            text-decoration: none;
            color: #333;
        }

        .order li div:nth-of-type(2) p:nth-of-type(2) a {
            color: red;
            font-size: 20px;
        }

        .guess {
            width: 1200px;
            height: 282px;
            margin: 0 auto;
            margin-top: 15px;
        }

        .guess .like {
            display: flex;
            justify-content: space-between;
            height: 30px;
            border-bottom: 1px solid #E4E4E4;
        }

        .guess .like h3 {
            margin: 0;
        }

        .guess .like a {
            text-decoration: none;
        }

        .guess .like:hover a {
            background-color: yellowgreen;
        }

        .goods {
            width: 1200px;
            height: 252px;
        }

        .goods ul {
            display: flex;
            justify-content: space-around;
            width: 1178px;
            height: 250px;
            border-bottom: 1px solid #E4E4E4;
            padding: 0 10px 0 10px;
            margin: 0px;
            list-style-type: none;
        }

        .goods ul li {
            width: 200px;
            height: 250px;
            padding: 0 10px;
        }

        .goods ul li img:hover {
            transform: scale(1.2);
        }

        .goods ul li div {
            box-sizing: border-box;
            width: 143px;
            height: 84px;
            border-right: 1px solid #eee;
        }

        .goods ul li div p {
            font-size: 12px;
            margin: 5px 0;
        }

        .goods ul li div p:nth-of-type(2) {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            color: #df3033;
            margin: 9px 0;
        }

        .electric {
            font-size: 0;
            margin: 0 auto;
            width: 1200px;
            height: 411px;
            margin-top: 15px;
        }

        .electric .all {
            width: 1200px;
            height: 48px;
            /* border:1px solid red; */
        }

        .electric .all h3 {
            margin: 9px 0;
            color: #c81623;
            font-size: 20px;
            width: 80px;
            height: 30px;
            line-height: 30px;
            float: left;
        }

        .electric .all ul {
            float: right;
            /* height:18px; */
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-top: 10px;
        }

        .electric .all ul li {
            float: left;
            height: 26px;
            line-height: 26px;

        }

        .electric .all ul li a {
            text-align: center;
            font-size: 12px;
            color: #666666;
            margin: 0 10px;
            text-decoration: none;
            border-right: 1px solid #666;
        }

        .electric .all ul li:first-of-type a {
            color: red;
        }

        .electric .all ul li:hover a {
            color: green;
            text-decoration: underline;
        }

        .electric .all ul li:nth-of-type(7) a {
            border-right-style: none;
        }

        .electric .box {
            display: flex;
            height: 360px;
            border-top: 2px solid #c81623;
            border-bottom: 1px solid #e4e4e4;
        }

        .electric .box div:first-of-type {
            width: 210px;
            /* background-color: red; */
        }

        .electric .box div:nth-of-type(2) {
            position: relative;
            overflow: hidden;
            width: 330px;
            height: 100%;
        }

        .electric .box div:nth-of-type(3) {
            border-right: 1px solid #eee;
            width: 220px;
            height: 100%;

        }

        .electric .box div:nth-of-type(4) {
            flex: 1;
            border-right: 1px solid #eee;
        }

        .electric .box div:nth-of-type(5) {
            flex: 1;
            border-right: 1px solid #eee;
        }

        .electric .box div:first-of-type ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            height: 81px;
            /* padding:0 15px; */
            margin: 0;
            padding: 15px 0;
            list-style-type: none;
            background-color: #F7F7F7;
        }

        .electric .box div:first-of-type ul li {
            width: 40%;
            line-height: 26px;
            margin: 0 10px;
            border-bottom: 1px solid #E4E4E4;
        }

        .electric .box div:first-of-type ul li a {
            font-size: 12px;
            color: rgb(51, 51, 51);
            text-decoration: none;
        }

        .electric .box div:first-of-type img {
            width: 209px;
            height: 254px;
        }

        .electric .box div:nth-of-type(2) ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 990px;
            padding: 0px;
            margin: 0px;
            list-style-type: none;
            animation: list 1s step-start infinite;
        }

        .electric .box div:nth-of-type(2) ul li {
            float: left;
        }

        .electric .box div:nth-of-type(2) ul li img {
            width: 330px;
            height: 360px;
        }

        @keyframes list {
            0% {
                left: 0px;
            }

            66% {
                left: -330px;
            }

            100% {
                left: -660px;
            }
        }

        .mac img {
            width: 100%;
            height: 50%;
        }

        .mac img:first-of-type {
            border-bottom: 1px solid #FAFAFA;
        }

        .class img {
            width: 100%;
            height: 50%;
        }

        .class img:first-of-type {
            border-bottom: 1px solid #FAFAFA;
        }

        .brand {
            display: flex;
            margin: 0px auto;
            list-style-type: none;
            background: #f7f7f7;
            width: 1200px;
            height: 37px;
            padding: 15px 0;
            line-height: 18px;
        }

        .brand li {
            width: 120px;
            height: 37px;
            border-right: 1px dotted #ccc;
        }

        /* 售后 */
        footer {
            margin: 0 auto;
            width: 1200px;
            background-color: #D9D9D9;
        }

        dl,
        dd,
        dt {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .table {
            display: flex;
            justify-content: space-around;
            width: 1200px;
            padding: 0 15px;
            margin: 0 auto;
            border-top: 1px solid #e4e1e1;
            border-bottom: 1px solid #e4e1e1;

        }

        .table a {
            color: #333;
            text-decoration: none;
        }

        .table dl {
            width: 1140px;
            padding: 20px 20px 20px 40px;
        }

        .table dl dd {
            font-size: 14px;
            font-weight: bold;
            line-height: 18px;
        }

        .table dl dt {
            font-size: 12px;
            line-height: 18px;
        }

        .end {
            width: 1160px;
            padding: 20px;

        }

        .end ul {
            display: flex;
            justify-content: center;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }

        .end ul li {
            border-right: 1px solid;
        }

        .end ul li:nth-of-type(10) {
            border-right-style: none;
        }

        .end ul a {
            text-decoration: none;
            color: #333;
            margin: 8px 10px;
            font-size: 12px;
            text-align: center;
        }

        .end p {
            text-align: center;
            margin: 10px 0;
            font-size: 12px;
        }

        /* 窗口侧边栏 */
        .toolbar {
            position: fixed;
            top: 0px;
            right: -300px;
            bottom: 0px;
            width: 300px;
            border-left: 5px solid #7A6E6E;
            background-color: #FFE4C4;
        }

        .oneSide {
            position: fixed;
            top: 0;
            right: -294px;
            bottom: 0;
            width: 300px;
            border-left: 6px solid #7A6E5E;
            box-sizing: border-box;
            background-color: pink;
            transition: all .3s;
        }

        input {
            display: none;
        }

        .even label {
            position: absolute;
            left: -35px;
            text-align: center;
            width: 35px;
            height: 35px;
            /* border: 1px solid; */
            background-color: #B29999;
            background-image: url(../images/list.png);
            background-size: 35px;
        }

        input:checked+.oneSide {
            right: 0;
        }

        input:checked+.oneSide label {
           background-image: url(../images/cross.png);
        }
    </style>
</head>

<body>
    <div>
        <header>
            <div id="header-top">
                <div>尚品汇欢迎您！请<a href="#">登入</a><a href="#" class="register">免费注册</a></div>
                <ul>
                    <li class="delete"><a href="#">我的订单</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的尚品汇</a></li>
                    <li><a href="#">尚品汇会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注尚品汇</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
            <div id="header-bottom">
                <div class="img">
                    <img src="../img/Logo.png">
                </div>
                <div class="search">
                    <form action="###">
                        <input type="text">
                        <button type="submit">搜索</button>
                    </form>
                </div>
            </div>
    </div>
    </header>
    <article>
        <section id="container">
            <h1>全部商品分类</h1>
            <ul>
                <li><a href="#">服装城</a></li>
                <li><a href="#">美妆馆</a></li>
                <li><a href="#">尚品汇超市</a></li>
                <li><a href="#">全球购</a></li>
                <li><a href="#">闪购</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">有趣</a></li>
                <li><a href="#">秒杀</a></li>
            </ul>
        </section>
    </article>
    </div>
    <div id="count">
        <div class="menu">
            <ul>
                <li>
                    <a href="#">图书、音像、数字商品 </a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#"> 家用电器</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                            <a href="#">畅读VIP</a>
                            <a href="#">畅读VIP</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#"> 手机、数码、充值</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#"> 电脑、办公</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#"> 家居、家具、家装、厨具</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">服饰内衣</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">个护化妆</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">运动健康</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">汽车用品</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">彩票、旅行</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">理财、众筹</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">母婴、玩具</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">箱包</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">运动户外</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>
                <li>
                    <a href="#">箱包</a>
                    <div>
                        <span>
                            <a href="#">电子书</a>
                            <a href="#">婚恋/两性</a>
                            <a href="#">文学</a>
                            <a href="#">经管</a>
                            <a href="#">畅读VIP</a>
                        </span>
                    </div>
                </li>

            </ul>
        </div>
        <div id="banner">
            <ol>
                <li>
                    <a href="#">
                        <img src="../images/home/banner1.jpg">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../images/home/banner2.jpg">
                    </a>
                </li>
                <li>
                    <a href="#"></a>
                    <img src="../images/home/banner3.jpg">
                    </a>
                </li>
                <li>
                    <a href="#"></a>
                    <img src="../images/home/banner4.jpg">
                    </a>
                </li>
            </ol>
            <div></div>
            <div></div>
        </div>
        <div id="right">
            <div class="list">
                <h4 class="top">
                    <em>尚品汇快报</em>
                    <span> 更多 ></span>
                </h4>
                <ul>
                    <li><a href="#"><span>[特惠]</span>备战开学季 全民半价购数码</a></li>
                    <li><a href="#"><span>[公告]</span>备战开学季 全民半价购数码</a></li>
                    <li><a href="#"><span>[特惠]</span>备战开学季 全民半价购数码</a></li>
                    <li><a href="#"><span>[公告]</span>备战开学季 全民半价购数码 </a></li>
                    <li><a href="#"><span>[特惠]</span>备战开学季 全民半价购数码</a></li>
                </ul>
            </div>
            <div class="script">
                <ul>
                    <li>
                        <div></div>
                        <a href="#">话费</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">机票</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">电影票</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">游戏机</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">彩票</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">加油站</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">酒店</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">火车票</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">众筹</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">理财</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">礼品卡</a>
                    </li>
                    <li>
                        <div></div>
                        <a href="#">白条</a>
                    </li>
                </ul>
            </div>
            <div class="picture">
                <img src="../images/home/ad1.png">
            </div>
        </div>
    </div>
    <ul class="commod">
        <li>
            <div>
                <img src="../images/home/clock.png">
                <h3>今日推荐</h3>
            </div>
        </li>
        <li>
            <a href="#">
                <img src="../images/home/today01.png">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../images/home/today02.png">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../images/home/today03.png">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="../images/home/today04.png">
            </a>
        </li>
    </ul>
    <div class="hot">
        <div>
            <a href="#">
                <p class="active"><i></i></p>
                <p>热卖排行</p>
            </a>
            <a href="#">
                <p><i></i></p>
                <p>特价排行</p>
            </a>
            <a href="#">
                <p><i></i></p>
                <p>新品排行</p>
            </a>
        </div>
    </div>
    <ul class="order">
        <li>
            <div>
                <a href="#">
                    <img src="../img/home/1.jpg">
                </a>
            </div>
            <div>
                <p><a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a></p>
                <p><a href="#">定金：¥100.00</a></p>
            </div>
        </li>
        <li>
            <div>
                <a href="#">
                    <img src="../img/home/1.jpg">
                </a>
            </div>
            <div>
                <p><a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a></p>
                <p><a href="#">定金：¥100.00</a></p>
            </div>
        </li>
        <li>
            <div>
                <a href="#">
                    <img src="../img/home/1.jpg">
                </a>
            </div>
            <div>
                <p><a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a></p>
                <p><a href="#">定金：¥100.00</a></p>
            </div>
        </li>
        <li>
            <div>
                <a href="#">
                    <img src="../img/home/1.jpg">
                </a>
            </div>
            <div>
                <p><a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a></p>
                <p><a href="#">定金：¥100.00</a></p>
            </div>
        </li>
    </ul>
    <div class="guess">
        <div class="like">
            <h3>猜你喜欢</h3>
            <a href="#">换一换</a>
        </div>
        <div class="goods">
            <ul>
                <li>
                    <img src="../images/home/like_01.png">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <p>¥116.00</p>
                    </div>
                </li>
                <li>
                    <img src="../images/home/like_02.png">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <p>¥116.00</p>
                    </div>
                </li>
                <li>
                    <img src="../images/home/like_03.png">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <p>¥116.00</p>
                    </div>
                </li>
                <li>
                    <img src="../images/home/like_01.png">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <p>¥116.00</p>
                    </div>
                </li>
                <li>
                    <img src="../images/home/like_02.png">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <p>¥116.00</p>
                    </div>
                </li>
                <li>
                    <img src="../images/home/like_03.png">
                    <div>
                        <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                        <p>¥116.00</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="electric">
        <div class="all">
            <h3>家用电器</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">大电器</a></li>
                <li><a href="#">生活电器</a></li>
                <li><a href="#">厨房电器</a></li>
                <li><a href="#">应季电器</a></li>
                <li><a href="#">空气、净水</a></li>
                <li><a href="#">高端电器</a></li>
            </ul>
        </div>
        <div class="box">
            <div>
                <ul>
                    <li><a href="#">节能补贴</a></li>
                    <li><a href="#">4K电视</a></li>
                    <li><a href="#">空气净化器</a></li>
                    <li><a href="#">IH电饭煲</a></li>
                    <li><a href="#">滚筒洗衣机</a></li>
                    <li><a href="#">电热水器</a></li>
                </ul>
                <img src="../images/home/floor-1-1.png">
            </div>
            <div>
                <ul>
                    <li><img src="../images/home/floor-1-b01.png"></li>
                    <li><img src="../images/home/floor-1-b02.png"></li>
                    <li><img src="../images/home/floor-1-b03.png"></li>
                </ul>
            </div>
            <div class="mac">
                <a href="#">
                    <img src="../images/home/floor-1-2.png" alt="">
                </a>

                <a href="#">
                    <img src="../images/home/floor-1-3.png" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../images/home/floor-1-4.png" alt="">
                </a>
            </div>
            <div class="last">
                <a href="#">
                    <img src="../images/home/floor-1-5.png" alt="">
                </a>

                <a href="#">
                    <img src="../images/home/floor-1-6.png" alt="">
            </div>
        </div>
    </div>
    <div class="electric">
        <div class="all">
            <h3>家用电器</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">大电器</a></li>
                <li><a href="#">生活电器</a></li>
                <li><a href="#">厨房电器</a></li>
                <li><a href="#">应季电器</a></li>
                <li><a href="#">空气、净水</a></li>
                <li><a href="#">高端电器</a></li>
            </ul>
        </div>
        <div class="box">
            <div>
                <ul>
                    <li><a href="#">节能补贴</a></li>
                    <li><a href="#">4K电视</a></li>
                    <li><a href="#">空气净化器</a></li>
                    <li><a href="#">IH电饭煲</a></li>
                    <li><a href="#">滚筒洗衣机</a></li>
                    <li><a href="#">电热水器</a></li>
                </ul>
                <img src="../images/home/floor-1-1.png">
            </div>
            <div>
                <ul>
                    <li><img src="../images/home/floor-1-b01.png"></li>
                    <li><img src="../images/home/floor-1-b02.png"></li>
                    <li><img src="../images/home/floor-1-b03.png"></li>
                </ul>
            </div>
            <div class="mac">
                <a href="#">
                    <img src="../images/home/floor-1-2.png" alt="">
                </a>

                <a href="#">
                    <img src="../images/home/floor-1-3.png" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="../images/home/floor-1-4.png" alt="">
                </a>
            </div>
            <div class="last">
                <a href="#">
                    <img src="../images/home/floor-1-5.png" alt="">
                </a>

                <a href="#">
                    <img src="../images/home/floor-1-6.png" alt="">
            </div>
        </div>
    </div>
    <ul class="brand">
        <li>
            <a href="#">
                <img src="../images/home/brand_03.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_05.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_07.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_09.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_11.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_13.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_15.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_09.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_11.png" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="../images/home/brand_03.png" alt="">
            </a>
        </li>
    </ul>
    <footer>
        <div class="table">
            <dl>
                <dd><a href="#">购物指南</a> </dd>
                <dt><a href="#">购物流程</a></dt>
                <dt><a href="#">会员介绍</a> </dt>
                <dt><a href="#">生活旅行/团购</a></dt>
                <dt><a href="#">常见问题</a></dt>
                <dt><a href="#">购物指南</a> </dt>
            </dl>
            <dl>
                <dd><a href="#">配送方式</a></dd>
                <dt><a href="#">上门自提</a></dt>
                <dt><a href="#">211限时达</a></dt>
                <dt><a href="#">配送服务查询</a></dt>
                <dt><a href="#">配送费收取标准</a></dt>
                <dt><a href="#">海外配送</a></dt>
            </dl>
            <dl>
                <dd><a href="#">支付方式</a></dd>
                <dt><a href="#">货到付款</a></dt>
                <dt><a href="#">在线支付</a></dt>
                <dt><a href="#">分期付款</a></dt>
                <dt><a href="#">邮局汇款</a></dt>
                <dt><a href="#">公司转账</a></dt>
            </dl>
            <dl>
                <dd><a href="#"> 售后服务</a> </dd>
                <dt><a href="#">售后政策</a></dt>
                <dt><a href="#">价格保护</a> </dt>
                <dt><a href="#">退款说明</a> </dt>
                <dt><a href="#">返修/退</a> </dt>
                <dt><a href="#">取消订单</a> </dt>
            </dl>
            <dl>
                <dd><a href="#">特色服务</a> </dd>
                <dt><a href="#"> 夺宝岛 </a>
                <dt>
                <dt><a href="#">DIY装机 </a>
                <dt>
                <dt><a href="#">延保服务</a></dt>
                <dt><a href="#">尚品汇E</a></dt>
                <dt><a href="#">尚品汇通</a> </dt>
            </dl>
            <dl>
                <dd><a href="#">帮助中心</a></dd>
                <dt>
                    <img src="../images/wx_cz.jpg">
                </dt>
            </dl>
        </div>
        <div class="end">
            <ul>
                <li><a href="#">关于我们 </a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">友情链接 </a></li>
                <li><a href="#">关于我们 </a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
            <p>地址：北京市昌平区宏福科技园综合楼6层</p>
            <p>京ICP备19006430号</p>
        </div>
        </div>
    </footer>
    <input type="checkbox" id="side">
    <div class="oneSide">
        <div class="even">
            <label for="side"></label>
            <label for="list"></label>
        </div>
    </div>
</body>

</html>